Com a CLI do Firebase, é possível implantar apps do Next.js para a Web no Firebase edisponibilizá-los com Firebase Hosting. A CLI respeita as configurações do Next.js eas converte em configurações do Firebase, e você não precisa configurar mais nada ouquase nada. Se o app incluir uma lógica dinâmica do lado do servidor, a CLI vai implantar essalógica no Cloud Functions for Firebase. A versão compatível mais recente do Next.js é 13.4.7.
Observação: o Hosting com reconhecimento de framework é um pré-lançamento antecipado público. Isso significaque a funcionalidade pode ser alterada de maneira incompatível com versões anteriores. Uma prévianão está sujeita a SLAs ou políticas de descontinuação e pode receber limitaçõesou ficar sem suporte.Atenção: para desenvolvedores que criam um app Next.js de pilha completa, é altamente recomendávelrecomendamos o Firebase App Hosting.Se você já usa o experimento de frameworks na CLI do Firebase,recomendar "formação" paraApp Hosting. Com o App Hosting, você terá uma solução unificada para gerenciardesde a CDN até a renderização do lado do servidor, além das melhorias no GitHubintegração.Antes de começarAntes de começar a implantação do app no Firebase,confira os seguintes requisitos e opções:
CLI do Firebase versão 12.1.0 ou mais recente. Instale a CLIusandoseu método preferido.Opcional: ative o faturamento no seu projeto do Firebase(obrigatório se você planeja usar a SSR).
Opcional: use a biblioteca experimental ReactFire para aproveitar osrecursos compatíveis com o Firebase
Inicializar o FirebasePara começar, inicialize o Firebase para seu projeto de framework.Use a CLI do Firebase para um novo projeto ou modifique firebase.json para umprojeto que já existe.
Inicializar um novo projetoNa CLI Firebase, ative a visualização de frameworks da Web:firebase experiments:enable webframeworksExecute o comando de inicialização da CLI e siga as instruções:
firebase init hostingResponda "Sim" para "Você quer usar uma estrutura da Web?" (experimental)
Escolha o diretório de origem de hospedagem. Se for um app Next.js,o processo da CLI será concluído e você poderá passar para a próxima seção.
Se necessário, escolha Next.js.
Disponibilizar conteúdo estáticoDepois de inicializar o Firebase, exiba conteúdos estáticos com o comando deimplantação padrão:
firebase deployÉ possível ver o app implantadono site ativo.
Pré-renderizar conteúdo dinâmicoA CLI do Firebase detectará o uso degetStaticProps e getStaticPaths.
Opcional: integrar com o SDK do Firebase para JavaScriptAo incluir métodos do SDK do Firebase para JavaScript nos pacotes do servidor e do cliente, protejacontra os erros de execução verificando isSupported() antes de usar o produto.Nem todos os produtos são compatíveis com todos os ambientes.
Dica: use o ReactFire,que faz issopara você automaticamente.Opcional: integrar com o SDK Admin do FirebaseOs pacotes do SDK Admin falharão se forem incluídos no build do navegador. É possível se referira eles somente dentro de getStaticPropse getStaticPaths (links em inglês).
Exibir conteúdo totalmente dinâmico (SSR)A CLI do Firebase detectará o uso degetServerSideProps.Nesses casos, a CLI vai implantar funções no Cloud Functions for Firebase para executar o código dinâmico do servidor. Você pode conferir as informações sobre essas funções, como a configuração do domínio e do ambiente de execução, no console do Firebase.
Configurar o comportamento de Hosting com next.config.jsOtimização de imagensO uso da Otimização de imagens Next.jsé compatível, mas ela acionará a criação de uma função(no Cloud Functions for Firebase), mesmo se você não usar SSR.
Observação: por isso, a otimização de imagens e os canais de visualização do Hosting nãofuncionam bem juntos.Redirecionamentos, substituições e cabeçalhosA CLI do Firebase respeitaredirecionamentos,substituições ecabeçalhos emnext.config.js, convertendo-os para aconfiguração equivalente de Firebase Hosting no momento da implantação. Se umredirecionamento, substituição ou cabeçalho do Next.js não puder ser convertido em um cabeçalhoequivalente do Firebase Hosting, ele usará uma função, mesmo se vocênão estiver usando otimização de imagens ou SSR.
Opcional: integrar com o Firebase AuthenticationAs ferramentas de implantação do Firebase com reconhecimento de framework da Web manterão automaticamenteo estado do cliente e do servidor em sincronia usando cookies. Há alguns métodos paraacessar o contexto de autenticação na SSR:
O objeto res.locals do Express pode conter uma instânciaautenticada do app Firebase (firebaseApp) e os usuários conectados(currentUser). Isso pode ser acessado em getServerSideProps.O nome do app autenticado do Firebase é fornecido na consulta de rota(__firebaseAppName). Isso permite a integração manual no contexto:// get the authenticated Firebase Appconst firebaseApp = getApp(useRouter().query.__firebaseAppName);